<!--
 * @Author: wangyu
 * @Date: 2024-12-26 12:57:31
 * @LastEditTime: 2024-12-26 16:38:35
 * @LastEditors: wangyu
 * @Description: 年度收益
 * @FilePath: \dzsq-smartpark-platform\src\views\assetsManager\components\yearRevenue.vue
-->
<template>
  <comHeaer title="年度收益率"></comHeaer>
  <div class="yearContent">
    <div v-for="item in data" :key="item.name">
      <el-progress
        type="dashboard"
        :percentage="item.value"
        stroke-width="12"
        :color="item.color"
      >
        <template #default="{ percentage }">
          <span class="percentage-label">{{ percentage }}%</span>
          <span class="percentage-desc">{{ item.desc }}</span>
        </template>
      </el-progress>
      <div class="yearContent-year">{{ item.name }}</div>
    </div>
  </div>
</template>

<script setup>
import comHeaer from "../../components/comHeader/index.vue";
const data = ref([
  {
    name: "2022年",
    value: 75,
    desc: "200万",
    color: "#00c0f2",
  },
  {
    name: "2023年",
    value: 58,
    desc: "180万",
    color: "#7ff4c1",
  },
  {
    name: "2024年",
    value: 44,
    desc: "132万",
    color: "#ffd771",
  },
]);
const option = {
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: ["40%", "70%"],
      center: ["50%", "70%"],
      data: [
        { value: 1048, name: "Search Engine" },
        { value: 735, name: "Direct" },
        { value: 580, name: "Email" },
        { value: 484, name: "Union Ads" },
        { value: 300, name: "Video Ads" },
      ],
    },
  ],
};
</script>
<style scoped lang="scss">
::v-deep {
  .el-progress__text {
    color: #ffffff;
  }
}
.yearContent {
  display: flex;
  width: 100%;
  font-size: 16px;
  height: calc(100% - 58px);
  align-items: center;
  .percentage-desc {
    position: absolute;
    font-size: 12px;
    bottom: -56px;
    left: 50%;
    transform: translateX(-50%);
  }
  > div {
    flex: 1;
    margin-right: 16px;
    text-align: center;
    &:last-child {
      margin-right: 0;
    }
  }
  &-year {
    margin-top: 16px;
  }
}
</style>
